<template>
	<view :style="$theme.pageStyle">
		
		<view class="paddings">
			<view class="navList bg-white radius-xl padding-xs">
				<u-sticky bgColor="#fff">
					<u-tabs :list="navList" @click="navClick" keyName="name" :scrollable="false" :lineColor="$theme.navBgColor"
						:activeStyle="{fontWeight:'bold'}">
					</u-tabs>
				</u-sticky>
			</view>
		</view>

		<view style="margin-top: 50px;" v-if="count === 0">
			<u-empty mode="data" text="没有优惠券">
			</u-empty>
		</view>


		<view class="padding padding-top-0 list">
			<block v-for="(item,index) in CouponList" :key="index">
				<view class="item padding bg-white radius-xl margin-bottom coupon">
					<view class="money-text text-center solid-right padding-right">
						<view class="money text-red">
							<text class="text-sm">￥</text>
							<text class="number text-bold">{{item.money}}</text>
						</view>
						<view class="text-red text-sm">
							{{item.use_scene}}
						</view>
					</view>
					<view class="right crow">
						<view class="nameBox margin-left">
							<view class="name text-black text-bold padding-bottom-xs">
								{{item.name}}
							</view>
							<view class="min text-gray padding-bottom-xs">
								<text class="text-sm text-gray">{{item.condition}}</text>
							</view>
							<view class="min text-gray">
								{{item.effective_time}}
							</view>
							<view class="min text-gray">{{item.tips}}</view>
						</view>
						<!-- <view class="linqu">
							<button class="cu-btn bg-green sm round shadow">去使用</button>
						</view> -->
					</view>
				</view>
			</block>
		</view>


	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				navIndex: 0,
				navList: [{
						name: '未使用',
						scene: 'isUnused'
					},
					{
						name: '已使用',
						scene: 'isUse'
					},
					{
						name: '已过期',
						scene: 'isExpire'
					},
				],
				current_page: 1,
				list: [],
				CouponList: {},
				count: 0
			};
		},
		onLoad() {
			this.GetData()
		},
		methods: {
			navClick(e) {
				this.list = [];
				this.navIndex = e.index;
				this.current_page = 1;
				this.GetData()
			},
			GetData() {
				$H.get('coupon/my', {
					page_no: this.current_page,
					page_size: 10,
					status: this.navIndex
				}, {
					token: true
				}).then(res => {
					this.CouponList = res.data.lists
					this.count = res.data.count
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.list {
		.item {
			position: relative;
			display: flex;
			align-items: center;

			.money-text {
				width: 170upx;

				.money {
					.number {
						font-size: 40upx;
					}
				}
			}

			.right {
				flex: 1;
				justify-content: space-between;

				.nameBox {
					.name {
						font-size: 30upx;
					}

					.min {
						font-size: 24upx;
					}
				}
			}
		}
	}

	.coupon::before,
	.coupon::after {
		content: "";
		position: absolute;
		background-color: #f5f5f7;
		width: 20upx;
		height: 20upx;
	}

	.coupon::before {
		top: 0;
		right: 25%;
		border-radius: 0 0 50% 50%;
	}

	.coupon::after {
		bottom: 0;
		right: 25%;
		border-radius: 50% 50% 0 0;
		/* 底部两个半圆 */
	}

	.crow {
		display: flex;
		align-items: center;
	}
</style>